<script setup lang="ts">
// 二次封装 iconify/vue 图标库组件, 动态引用图标集
// 此图标模块支持使用以下图标库所有图标，且均按需编译

// 官网 https://iconify.design/
// 包库 https://www.npmjs.com/package/@iconify/vue

//Icônes图标库 https://icones.js.org/collection/all
//iconify图标库 https://icon-sets.iconify.design/
//其它免费可商用图标库 http://www.remixicon.cn/ http://www.remixicon.com/
//naiveui Icon Props https://www.naiveui.com/zh-CN/os-theme/components/icon#API
import type {
  IconifyIcon,
  IconifyIconOnLoad,
  IconifyIconCustomisations,
} from '@iconify/vue'

import { Icon as UiIconify } from '@iconify/vue'

// import { disableCache } from '@iconify/vue'
// if (!import.meta.env.PROD) {
//   disableCache('all')
//   sessionStorage.removeItem('iconify-count')
//   sessionStorage.removeItem('iconify-version')
//   localStorage.removeItem('iconify-count')
//   localStorage.removeItem('iconify-version')
// }

interface IconProps extends IconifyIconCustomisations {
  icon: IconifyIcon | string
  id?: string
  style?: unknown
  onLoad?: IconifyIconOnLoad
  name?: string
  color?: string
  flip?: string
  align?: string
}

const props = defineProps<IconProps>()

let IconName: string = null
if (typeof props.icon == 'string') {
  IconName = props.icon
  const collections = [
    'mdi',
    'mdi-light',
    'ic',
    'ph',
    'icon-park-outline',
    'icon-park',
    'uil',
    'bx',
    'ri',
    'la',
    'iconoir',
    'jam',
    'ion',
    'bi',
    'clarity',
    'carbon',
    'cil',
    'gg',
    'tabler',
    'teenyicons',
    'fa-solid',
    'fa-regular',
    'vaadin',
    'icomoon-free',
    'eva',
    'pixelarticons',
    'majesticons',
    'ci',
    'eos-icons',
    'dashicons',
    'entypo',
    'zondicons',
    'flat-color-icons',
    'octicon',
    'codicon',
    'ant-design',
    'lucide',
    'fe',
    'radix-icons',
    'line-md',
    'system-uicons',
    'akar-icons',
    'uiw',
    'uim',
    'uit',
    'uis',
    'gridicons',
    'mono-icons',
    'heroicons-outline',
    'heroicons-solid',
    'file-icons',
    'mi',
    'ps',
    'el',
    'foundation',
    'typcn',
    'subway',
    'raphael',
    'icons8',
    'wpf',
    'iwwa',
    'topcoat',
    'ei',
    'bytesize',
    'fluent',
    'grommet-icons',
    'pepicons',
    'maki',
    'oi',
    'et',
    'vscode-icons',
    'fontisto',
    'fa',
    'zmdi',
    'whh',
    'si-glyph',
    'ls',
    'simple-line-icons',
    'flat-ui',
    'vs',
    'websymbol',
    'il',
    'bpmn',
    'fontelico',
    'feather',
    'noto',
    'noto-v1',
    'twemoji',
    'openmoji',
    'emojione',
    'emojione-monotone',
    'emojione-v1',
    'fxemoji',
    'logos',
    'cib',
    'simple-icons',
    'fa-brands',
    'brandico',
    'entypo-social',
    'cryptocurrency',
    'gis',
    'map',
    'geo',
    'cif',
    'fad',
    'wi',
    'healthicons',
    'medical-icon',
    'ep',
  ]

  IconName = IconName.replace(/([a-z])(\d+)/g, '$1-$2')
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .toLowerCase()
  IconName = IconName.replace(':', '-')
  const collection =
    collections.find((i) => {
      return IconName.startsWith(`${i}-`)
    }) ||
    collections.find((i) => {
      return IconName.startsWith(i)
    })

  if (collection) {
    IconName = IconName.replace(collection + '-', collection + ':')
  } else {
    IconName = null
  }
}

const network = ref(true)
onMounted(() => {
  // 检测断网
  window.addEventListener('offline', () => {
    network.value = false
  })
  window.addEventListener('online', () => {
    network.value = true
  })
})

/*
var fallBackAPISources = ['https://api.simplesvg.com', 'https://api.unisvg.com']
var fallBackAPI = []
while (fallBackAPISources.length > 0) {
  if (fallBackAPISources.length === 1) {
    fallBackAPI.push(fallBackAPISources.shift())
  } else {
    if (Math.random() > 0.5) {
      fallBackAPI.push(fallBackAPISources.shift())
    } else {
      fallBackAPI.push(fallBackAPISources.pop())
    }
  }
}
var url = ['https://api.iconify.design'].concat(fallBackAPI)
console.log(url)
*/
</script>

<template>
  <!-- <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    aria-hidden="true"
    role="img"
    class="iconify iconify--ic"
    width="32"
    height="32"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 24 24"
    v-if="!network"
  >
    <path
      fill="currentColor"
      d="M20.06 10.14c.56.46 1.38.42 1.89-.09c.59-.59.55-1.57-.1-2.1c-3.59-2.94-8.2-4.03-12.55-3.26l2.59 2.59c2.89-.03 5.8.92 8.17 2.86zm-2.27 1.83c-.78-.57-1.63-1-2.52-1.3l2.95 2.95c.24-.58.1-1.27-.43-1.65zm-3.84 4.26a4.28 4.28 0 0 0-3.91 0c-.59.31-.7 1.12-.23 1.59l1.47 1.47c.39.39 1.02.39 1.41 0l1.47-1.47c.49-.47.39-1.28-.21-1.59zm5.73 1.67L4.12 2.34a.996.996 0 1 0-1.41 1.41L5.05 6.1c-1.01.5-1.99 1.11-2.89 1.85a1.42 1.42 0 0 0-.1 2.1c.51.51 1.32.56 1.87.1c1-.82 2.1-1.46 3.25-1.93l2.23 2.23c-1.13.3-2.21.8-3.19 1.51c-.69.5-.73 1.51-.13 2.11l.01.01c.49.49 1.26.54 1.83.13a7.135 7.135 0 0 1 3.97-1.29l6.37 6.37c.39.39 1.02.39 1.41 0c.39-.37.39-1 0-1.39z"
    ></path>
  </svg> -->
  <UiIconify v-if="network" v-bind="props" :icon="IconName ?? props.icon" />
</template>
